<template>
<el-container>
    <el-aside width="200px">
        <PersonalMenu></PersonalMenu>
    </el-aside>
    <el-main>
        <el-row>
            <el-col :span="24">
                <div class="join-search">
                    <el-form ref="company" :model="company" label-width="80px" :rules="rules">
                        <el-form-item class="join-type" prop="companyType">
                            <el-select v-model="companyTypeId" clearable placeholder="请选择">
                                <el-option v-for="companyType in companyTypes" :key="companyType.id" :label="companyType.name" :value="companyType.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="name" class="join-input">
                            <el-input placeholder="请输入想要加入的公司名称" v-model="company.name" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" class="join-btnSearch" @click="search">搜索企业</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>

        <div v-for="company in companies.slice(0,1)" :key="company.id">
            <el-table :data="companies" style="width: 100%">
                <el-table-column  label="序号" type="index"></el-table-column>
                <el-table-column :formatter="format" prop="name" label="企业名称" width="180"></el-table-column>
                <el-table-column prop="website" label="企业官网" width="180"></el-table-column>
                <el-table-column prop="introduction" label="公司简介"></el-table-column>
                <el-table-column label="企业联系邮箱" prop="email"></el-table-column>
                <el-table-column  prop="op" label="操作" width="185">
                     <template #default="scope">
                        <template v-for="apply in applies" :key="apply.companyId">
                            <template v-if="apply.companyId == company.id && apply.userinfoId == userinfo.id">
                                <el-button type="text" disabled >已申请</el-button>
                            </template>
                            <el-button type="text" @click="join(scope.$index)">申请加入</el-button>
                        </template>
                        
                    </template> 
                </el-table-column>
            </el-table>
        </div>
        <el-pagination background @current-change="currentChange" :total="count" :current-page="pageNum" :page-size="pageSize" layout="prev, pager, next">
        </el-pagination>

    </el-main>
</el-container>
</template>

<script>
import PersonalMenu from '@/components/menu/PersonalMenu'
import Index from '@/components/Index'
import instance from '@/utlis/request.js';
import instanceToken from '@/utlis/tokenIdentify.js';
export default {
    name: 'JoinCompanyView',
    components: {
        PersonalMenu,
        Index
    },
    data() {

        return {
            pageSize: 5,
            pageNum: 1,
            count: 0,
            company: {
                id: '',
                name: '',
                companyTypeId: '',
                email: '',
                introduction: '',
                website: '',
                op:''
            },
            applyShow: '申请加入',
            appliedShow: '已申请',
            applies: [],
            apply: {
                id: '',
                userinfoId: '',
                companyId: '',
            },
            userinfo: {
                id: '',
            },
            companies: [],
        }
    },
    created() {
        this.initCompanyType();
        this.initCompany();
        // this.initApply();
    },
    methods: {
       
        // format(row, column, cellValue, index){
        //      console.log(this.applies[index]);
        //      console.log(row)
           
        //     if(this.applies[index].companyId==1){
        //         console.log("hahahha")
        //         row.op="haha"
             
        //     }
        //      return row;
        // },
        initCompanyType() {
            //进入界面： 获得公司类型
            instance.get("company-type/personal/acceptCompanyType", {
                params: {
                    companyTypeId: this.companyTypeId
                }
            }).then(res => {

                this.companyTypes = res.data.data.companyTypes;
            })
        },
        initCompany() {

            var loginUser = window.sessionStorage.getItem("loginUser");
            this.userinfo = JSON.parse(loginUser);
            console.log(this.userinfo)
            instance.get("company/personal/initCompany", {
                params: {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,

                }
            }).then(res => {
                console.log(res.data);
                this.applies = res.data.data.applies;
                this.companieId = res.data.data.applies
                this.companies = res.data.data.companies.list;
                this.count = res.data.data.companies.total;
                //  for(let i = 0;i<this.applies.length;i++){
                //    for(var j = 0;j<this.companies.length;j++){
                //        if(this.companies[j].id == this.applies[i].companyId && this.applies[i].userinfoId == this.userinfo.id){
                //            this.applyShow = '已申请';
                //        }
                //    }
                    
                // }
            })
        },

        currentChange(val) {
            this.pageNum = val;
            this.initCompany();
        },
        search() {
            instance.get("company/personal/findCompanyByName", {
                params: {
                    name: this.company.name,
                }
            }).then(res => {
                console.log(res.data);
                this.companies = res.data.data;
                this.count = res.data.data.total;
            })
        },
        join(index, row) {

            var loginUser = window.sessionStorage.getItem("loginUser");
            console.log(loginUser);
            var userinfo = JSON.parse(loginUser);

            //this.apply.userinfoId = userinfo.id;
            var formData = new FormData();
            formData.append("companyId", this.companies[index].id);
            formData.append("userinfoId", userinfo.id);
            instanceToken.post("company/personal/JoinCompany", formData).then(res => {

                if (res.data.success) {
                    window.location.reload();
                }
            })
        }

    }
}
</script>

<style scoped>
.join-search {
    margin-top: 30px;
}

.join-type {
    float: left;
    width: 200px;

}

.join-input {
    float: left;
    width: 800px;
    padding: 0;
}

.join-btnSearch {
    float: left;
}

.join-company {
    margin-left: 10px;
    width: 100%;
}
</style>
